// 从本地获取信息并渲染
const userId = localStorage.getItem('user-id')
const token = localStorage.getItem('user-token')

//如果能获取到用户id，则渲染首页面中购物车商品的数量
if(userId && token) {
  axios({
    url:'/cart/list',
    headers:{
      'Access-Token':token,
      platform:'H5'
    }
  }).then(result=>{
    console.log(result)
    // console.log(result.data.data.cartTotal)
    if(result.data.data.cartTotal===0) {
      document.querySelector('.car_number').style.display = 'none'
    } else {
      document.querySelector('.car_number').innerHTML= result.data.data.cartTotal
      document.querySelector('.car_number').style.display = 'block'
    }
  })
} else {
  document.querySelector('.car_number').style.display = 'none'
}





// 首屏加载渲染
getList()

// 点击商品类，跳转对应商品列表
document.querySelector('.class_main_right ul').addEventListener('click',e =>{
  if(e.target.tagName ==='IMG') {
    // console.log(e.target.parentNode.nextElementSibling.innerHTML)
    localStorage.setItem('goodsList',e.target.parentNode.nextElementSibling.innerHTML)
  } else if(e.target.classList.contains('class_main_title')) {
    // console.log(e.target.innerHTML)
    localStorage.setItem('goodsList',e.target.innerHTML)
  }
  location.href='./list.html'
})

// 封装获取商品全部分类并渲染
async function getList() {
  try{
    const leftList = await axios({ url:'/category/list'})
    // console.log(leftList.data.data.list)

    const list = leftList.data.data.list
    document.querySelector('.class_main_left ul').innerHTML = list.map((item,index)=>{
      return`<li class="" data-id='${item.category_id}'><a href="#" data-id='${index}'>${item.name}</a></li> `
    }).join('')
    document.querySelector('.class_main_left ul li:nth-child(1)').classList.add('active') 

    
    const child = leftList.data.data.list[0].children
    document.querySelector('.class_main_right ul').innerHTML=  child.map(item=>`
    <li>
      <a href="#">
        <div class="class_main_pic">
          <img src="${item.image.preview_url}" alt="">
        </div>
        <div class="class_main_title">${item.name}</div>
      </a>
    </li>
  `).join('')

    // 左侧点击切换列表
    const lis= document.querySelectorAll('.class_main_left ul li')
    document.querySelector('.class_main_left ul').addEventListener('click',e=>{
        // console.log(e.target.dataset.id)
        // 排他操作
        const active = document.querySelector('.class_main_left .active')
        if(active) active.classList.remove('active')
        lis[e.target.dataset.id].classList.add('active')

        const children = leftList.data.data.list[e.target.dataset.id].children
        // console.log(children)
        // 判断列表下面的有无商品分类
        if(children) {
          document.querySelector('.class_main_right ul').innerHTML=  children.map(item=>`
            <li>
              <a href="#">
                <div class="class_main_pic">
                  <img src="${item.image.preview_url}" alt="">
                </div>
                <div class="class_main_title">${item.name}</div>
              </a>
            </li>
          `).join('')
        } else {
          document.querySelector('.class_main_right ul').innerHTML= ''
        }
      })
    }catch(error){
    console.dir(error)
  }
}

